import React, { useRef } from 'react';
import {  ModalForm,   ProFormInstance, ProFormTextArea, } from '@ant-design/pro-form';

type FormProps = {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (ids:string) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, onCancel, onSubmit } = props;
  if (!visible) {
    return <></>;
  }

  // const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const handleFormSubmit = async () => {
    let ips = formRef.current?.getFieldValue("ips");
    onSubmit(ips);
  };  
  

  return (
    <ModalForm
      width={900}
      formRef={formRef}
      visible={visible}
      title="批量录入服务器实例ID"
      onFinish={handleFormSubmit}
      modalProps={{
        onCancel: onCancel,
        //destroyOnClose: false,
        maskClosable: false,
      }}
    >

            <ProFormTextArea 
            width={800}
            name="ips" 
            label={<span>实例ID列表　[ 一行一个实例ID ]</span>} 
            fieldProps={
              {rows:25}
            }
            />

    </ModalForm>
  );
};

export default Form;
